<#include "common/layout/__mainlayout.html">
<#assign navLink='manage:role:list' />
<@mainlayout>
<div class="row-content am-cf">
	<div class="row">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
			<div class="widget am-cf">
				<div class="widget-head am-cf">
					<div class="widget-title am-fl"></div>
						<div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN SAMPLE TABLE PORTLET-->
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-comments"></i>角色管理
                                </div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"> </a>
                                    <a href="#portlet-config" data-toggle="modal" class="config"> </a>
                                    <a href="javascript:;" class="reload"> </a>
                                    <a href="javascript:;" class="remove"> </a>
                                </div>
                            </div>
                            <div class="portlet-body">
                            	
                            	<div id="toolbar" class="btn-group">
                                      <@hasperm key="manage:role:save">
	                                 <button id="btn_add" type="button" class="btn btn-success">
	                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	                                </button>
	                                <button id="btn_edit" type="button" class="btn btn-info">
	                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
	                                </button>
                                        </@hasperm>
                                        <@hasperm key="manage:role:updateAuthority">
	                                  <button id="btn_grant" type="button" class="btn btn-primary btn-outline">
	                                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>授权
	                                </button>
                                    </@hasperm>
                                    <@hasperm key="manage:role:delete">
	                                <button id="btn_delete" type="button" class="btn btn-danger">
	                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	                                </button>
                                  </@hasperm>
	                            </div>
                            	
                                <div class="table-scrollable">
                                    <table class="table-striped table-hover" id="table"
                                           data-toggle="table"
                                           data-pagination="true"
                                           data-search="true"
                                           data-advanced-search="true"
                                           data-id-table="advancedTable" data-toolbar="#toolbar"
                                           data-url="${realpath}/manage/role/load">
                                        <thead>
                                            <tr>
                                                <th data-checkbox="true"></th>
                                                <th data-field="id" data-sortable="true">Id</th>
                                                <th data-field="name" data-sortable="true">名称</th>
                                                <th data-field="seq" data-sortable="true" >排序</th>
                                                <th data-field="createdate" data-sortable="true" >创建时间</th>
                                                <th data-field="status" data-sortable="true" data-formatter="statusFormatter">是否启用</th>
                                                 <th data-field="des" data-sortable="true" >描述</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- END SAMPLE TABLE PORTLET-->
                    </div>
					</div>
				<div class="widget-body  widget-body-lg am-fr">
				</div>
			</div>
		</div>
	</div>
</div>

 <!-- responsive -->
<div id="model" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    </div>
    <div class="modal-body">
              <form class="form-horizontal" role="form">
              <input type="hidden" name="id" id="id" > 
                  <div class="form-body">
                       <div class="form-group">
                          <label class="col-md-3 control-label">名称</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="name" id="name" value=""> </div>
                      </div>
                       <div class="form-group">
                          <label class="col-md-3 control-label">排序</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="seq" id="seq" > </div>
                      </div>
                       <div class="form-group">
                          <label class="col-md-3 control-label">是否启用</label>
                          <div class="col-md-9">
                              <select class="form-control" name="status" id="status">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                   			</select>
                           </div>
                      </div>
                     <div class="form-group">
                          <label class="col-md-3 control-label">描述</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="des" id="des"> </div>
                      </div>
                  </div>
              </form>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-danger">关闭</button>
        <button type="button" class="btn green" id="btn_save">保存</button>
    </div>
</div>


 <!-- responsive -->
<div id="permtree" class="modal fade" tabindex="-1" data-width="360">
    <div class="modal-header">
        <button type="button" class="btn blue" id="tree_all">全选</button>
        <button type="button" class="btn green" id="tree_cancel">取消</button>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    </div>
    <div class="modal-body">
         <div id="mytree"></div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-danger">关闭</button>
        <button type="button" class="btn green" id="tree_save">保存</button>
    </div>
</div>

</@mainlayout>
<script src="${realpath}/resources/super/plugins/jstree/dist/jstree.min.js"></script>
<script>
function statusFormatter(value, row) {
    
    if (row.status == "1") {
        return ' <span class="label label-sm label-success"> 启用</span>';
    }
    else {
        return ' <span class="label label-sm label-danger"> 禁用</span>';
    }
  
}
	

    function getIds(){
  	  var ids = "";
  	 var selects = $('#table').bootstrapTable('getSelections');
  		for(var i = 0, _length=selects.length; i < _length ; i++){
  			if(i == _length-1){
                    ids = ids +"ids=" + selects[i].id;
                }
                else{
              	  ids = ids + "ids=" + selects[i].id + "&";
                }
  		}
  	return ids;
     }

    //
    function del(arr){
            layer.confirm('确认要删除吗？', {
        btn: ['是', '否'], //按钮
        shade: false //不显示遮罩
    }, function() {
    var d = dialog({
        content: "<div><img src='${realpath}/resources/images/loading.gif' />&nbsp;&nbsp;&nbsp;删除中...</div>",
    });
    d.showModal();
    setTimeout(function() {
        d.close().remove();
    }, 1000);
        $.ajax({
            url: '${realpath}/manage/role/delete',
            type: 'POST',
            dataType: 'json',
            data: arr,
            success: function(res) {
                if (res.errorMsg != null) {
                    layer.msg(res.errorMsg, {
                        icon: 5,
                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                    });
                } else {
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function() {
                        $('#table').bootstrapTable('refresh');
                    });
                }
            }
        });


    }, function() {

    });

    }
    
    //
    $("#btn_delete").click(function(){
    	var arr = getIds();
    	if(arr.length == 0){
    		layer.msg("请选择要标记的行", {
				icon: 5,
				time: 1500 //2秒关闭（如果不配置，默认是3秒）
			});
			return;
    	}
        del(arr);
    });
    
    $("#btn_add").click(function(){
 	   $("input").val("");
 	   $('#model').modal('show');		 
    });
    
    //

    $("#btn_edit").click(function(event) {
    	var selects = $('#table').bootstrapTable('getSelections');
          if(selects.length != 1){
            layer.msg("请选择<b style='color:red;font-size:15px;'>1</b>行进行修改", {
            icon: 5,
            time: 1500 //2秒关闭（如果不配置，默认是3秒）
          });
        return;
          }
        	update(selects);	
    });

      function update(selects){
    	   $("input").val("");
             var select = selects[0];
              $("#name").val(select.name);
              $("#seq").val(select.seq);
              $("#status").val(select.status);
              $("#des").val(select.des);
              $("#id").val(select.id);
             $('#model').modal('show');
      }
       
    //
    
    $("#btn_save").click(function(event) {
   	 $.ajax({
	 	url: '${realpath}/manage/role/save',
	 	type: 'post',
	 	dataType: 'json',
	 	data: $("form").serialize(),
	 	success:function(res){
		   if (res.errorMsg != null) {
		                    layer.msg(res.errorMsg, {
		                        icon: 5,
		                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
		                    });
		                } else {
		                    layer.msg('保存成功', {
		                        icon: 1,
		                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
		                    }, function() {
		                        $('#table').bootstrapTable('refresh');
		                        $('#model').modal('hide');	
		                    });
		                }	
	 	}
	 });
   });

    $(document).ready(function() {
            $('#mytree').jstree({
                'core': {
                    'data': {
                        'url': '${realpath}/manage/tree/list',
                        'data': function (node) {
                            return { 'id': node.id };
                        }
                    }
                },
                 plugins: ["checkbox"], //选择插件
                checkbox: { 'cascade': "",'three_state': false}, //选择框插件配置
            });
    });
    
    $("#btn_grant").click(function(){
      var selects = $('#table').bootstrapTable('getSelections');
          if(selects.length != 1){
            layer.msg("请选择<b style='color:red;font-size:15px;'>1</b>行进行修改", {
            icon: 5,
            time: 1500 //2秒关闭（如果不配置，默认是3秒）
          });
        return;
          }
          $('#mytree').jstree('deselect_all');

        $.ajax({
            url: '${realpath}/manage/role/getResourceId',
            type: 'post',
            dataType: 'json',
            data: {id: selects[0].id},
            success:function(res){
                  if (res.errorMsg != null) {
                        layer.msg(res.errorMsg, {
                            icon: 5,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        });
                    } else {
                      var data = res.data;
                       for(var i = 0, _length = data.length; i < _length; i++){
                           $('#mytree').jstree('select_node',data[i]);
                       }
                    } 
            }
        });
      

    	$('#permtree').modal('show');	
    });

    $("#tree_save").click(function(event) {
      var nodes = $('#mytree').jstree('get_selected');
      var roleId = $('#table').bootstrapTable('getSelections')[0].id;
      $.ajax({
        url: '${realpath}/manage/role/updateAuthority',
        type: 'post',
        dataType: 'json',
        data: {roleId:roleId,
                    resIds:nodes.join(",")
            },
        success:function(res){
            if (res.errorMsg != null) {
                        layer.msg(res.errorMsg, {
                            icon: 5,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        });
                    } else {
                        layer.msg('授权成功', {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function() {
                            $('#permtree').modal('hide');  
                        });
                    } 
        }
      });
      
    });

    //

    $("#tree_all").click(function(event) {
            $("#mytree").jstree("select_all");
    });

        $("#tree_cancel").click(function(event) {
            $("#mytree").jstree("deselect_all");
    });
</script>

